import React from 'react'
import "./style.less"
import MySwiper from "../../../components/MySwiper"
import Tabs from "../../../components/Tabs"
import Comment from "../Comment"
import StoreAndBuy from "../StoreAndBuy"


export default function DetailsInfoView ({ data, id }) {
  return (
    <div>
      <MySwiper banners={data.imgs} />
      <Tabs>
        <div label="详情">
          <div className="detail-info">
            <h3>{data.title}</h3>
            <div className="box">
              <ul>
                <li>
                  <span>{data.price} /月</span>
                  <p>租金</p>
                </li>
                <li>
                  <span>{data.info.type}</span>
                  <p>房屋类型</p>
                </li>
                <li>
                  <span>{data.houseType}</span>
                  <p>面积</p>
                </li>
              </ul>
            </div>
            <div className="info">
              <div className="info-list">
                <p>类型：{data.info.type}</p>
                <p>朝向：{data.info.orientation}</p>
              </div>
              <div className="info-list">
                <p>楼层：{data.info.level}</p>
                <p>装修：{data.info.style}</p>
              </div>
              <div className="info-list">
                <p>年代：{data.info.years}</p>
              </div>
            </div>
          </div>
          <StoreAndBuy id={id} />
        </div>
        <div label="评价">
          <Comment id={id} />
        </div>
      </Tabs>
    </div>
  )
}
